<template>
  <div class="login-view">
    <div class="head">
      <el-image :src="logoUrl"></el-image>
    </div>
    <div class="icon-box">
      <el-image class="recycle" :src="recycleUrl"></el-image>
      <el-image class="close" :src="closeUrl"></el-image>
    </div>
    <div class="content">
      <div class="left">
        <div>扫一扫登录</div>
        <div>请使用 <span>巍格智能 App</span> 扫码登录</div>
        <div class="qrcode">
          <el-image :src="qrcodeUrl"></el-image>
        </div>
        <div>NAS App - 首页右上角 - 扫一扫登录</div>
        <el-button>刷新二维码</el-button>
      </div>
      <div class="right">
        <div class="tab">
          <div :class="active == 0 ? 'active' : ''" @click="active = 0">账号密码登录</div>
          <div :class="active == 1 ? 'active' : ''" @click="active = 1">验证码登录</div>
        </div>
        <el-form :model="accountForm" v-if="active == 0">
          <el-form-item>
            <el-input v-model="accountForm.account" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="accountForm.paddword" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item style="margin-bottom: 0">
            <el-input v-model="accountForm.code" placeholder="请输入验证码" class="codeInput"></el-input>
            <el-button class="codeBtn" style="color: #000">WDCWD</el-button>
          </el-form-item>
        </el-form>
        <el-form :model="phoneForm" v-else>
          <el-form-item>
            <el-input v-model="phoneForm.phoneCode" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item style="margin-bottom: 0">
            <el-input v-model="phoneForm.code" placeholder="请输入验证码" class="codeInput"></el-input>
            <el-button class="codeBtn">获取验证码</el-button>
          </el-form-item>
        </el-form>
        <div class="submit" @click="login">登录</div>
         <el-checkbox v-model="checked">登录代表您已同意 《<span>用户协议</span>》 和 《<span>隐私政策</span>》</el-checkbox>
      </div>
    </div>
    <div class="footer">copyrght © 2020 巍格智能NAS</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      logoUrl: require('../../assets/images/logo.png'),
      recycleUrl: require('../../assets/images/recycle.png'),
      closeUrl: require('../../assets/images/close.png'),
      qrcodeUrl: require('../../assets/images/qrcode.png'),
      accountForm: {
        account: '',
        paddword: '',
        code: ''
      },
      phoneForm: {
        phoneCode: '',
        code: ''
      },
      checked: false
    }
  },
  methods: {
    login() {
      window.localStorage.setItem('token', 1)
      this.$router.push({
        name: 'DeviceManage'
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .login-view {
    position: relative;
    height: 100%;
    .head{
      display: flex;
      justify-content: center;
      padding-top: 40px;
      .el-image{
        width: 280px;
        height: 36px;
      }
    }
    .icon-box{
      position: absolute;
      right: 24px;
      top: 40px;
      display: flex;
      align-items: center;
      .recycle{
        width: 12px;
        height: 2px;
        cursor: pointer;
      }
      .close {
        width: 12px;
        height: 12px;
        margin-left: 15px;
        cursor: pointer;
      }
    }
    .content{
      padding: 72px 136px 0 136px;
      display: flex;
      justify-content: space-between;
      .left{
        display: flex;
        flex-direction: column;
        align-items: center;
        div:nth-child(1) {
          font-size: 24px;
          margin-bottom: 39px;
        }
        div:nth-child(2) {

          margin-bottom: 19px;
          span{
            color: #3561F6;
          }
        }
        .qrcode{
          width: 200px;
          height: 200px;
          padding: 14px;
          border: 1px solid #E2E2E2;
          margin-bottom: 15px;
          .el-image{
            width: 100%;
            height: 100%;
          }
        }
        div:nth-child(4) {
          color: #999999;
          font-size: 14px;
          margin-bottom: 32px;
        }
        .el-button {
          border-color: #3561F6;
          color: #3561F6;
        }
      }
      .right{
        width: 310px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .tab{
          width: 300px;
          display: flex;
          justify-content: space-between;
          display: flex;
          align-items: flex-end;
          margin-bottom: 39px;
          div {
            font-size: 16px;
            color: #3561F6;
            cursor: pointer;
          }
          .active{
            font-size: 24px;
            color: #000;
          }
        }
        .submit{
          width: 300px;
          height: 46px;
          background-color: #4452E5;
          box-shadow: 0px 6px 18px #727df4;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-size: 18px;
          border-radius: 6px;
          margin: 52px 0 41px 0;
          cursor: pointer;
        }
        .submit:hover{
          background: #6b8cfb !important;
          border-color: #6b8cfb !important;
        }
        .el-checkbox{
          font-size: 12px;
          span{
            color: #4452E5;
            cursor: pointer;
          }
        }
      }
    }
    .footer{
      font-size: 12px;
      color: #B0BCCE;
      margin-top: 45px;
      text-align: center;
    }
  }
  /deep/ .el-form{
    width: 300px !important;
    .el-form-item{
      margin-bottom: 20px;
    }
    .codeInput{
      width: 170px;
    }
    .codeBtn{
      width: 110px; 
      margin-left: 20px; 
      color: #4A65E5
    }
  }
</style>